<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Report Chart</title>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="/js/excanvas.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="/css/jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="/css/examples.css" />

<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="/js/jquery.min.js"></script>
<!-- END: load jquery -->

<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="/js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.cursor.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.highlighter.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.dragable.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/plugins/jqplot.trendline.min.js"></script>
<!-- END: load jqplot -->

</head>

<body>
<script type="text/javascript">
var ajaxDataRenderer;
var plotOptions;
$(document).ready(function(){
     plotOptions = {
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        series: [{
            yaxis: 'yaxis',
            label: '點擊'
        }, {
            yaxis: 'y2axis',
            label: '曝光'
        }],
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickOptions: {
                    formatString: '%b&nbsp;%#d'
                }
            },
            yaxis: {
                label: "點擊",
                tickOptions: {
                    formatString: '%d'
                }
            },
            x2axis: {
                renderer: $.jqplot.DateAxisRenderer,
                tickOptions: {
                    formatString: '%b&nbsp;%#d'
                }
            },
            y2axis: {
                label: "曝光",
                tickOptions: {
                    formatString: '%d'
                }
            }
        },
        noDataIndicator: {
            show: true,
            indicator: '',
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%b&nbsp;%#d'
                    }
                },
                yaxis: {
                    label: "點擊",
                    tickOptions: {
                        formatString: '%d'
                    }
                },
                x2axis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%b&nbsp;%#d'
                    }
                },
                y2axis: {
                    label: "曝光",
                    tickOptions: {
                        formatString: '%d'
                    }
                }
            }
        },
        highlighter: {
            show: true,
            sizeAdjust: 7.5
        },
        cursor: {
            show: false
        }
    };
	
    plot1 = $.jqplot('dataChart', [], plotOptions);
    //$.jqplot.config.defaultWidth = "900px";
    //$.jqplot.config.defaultHeight = "500";
    ajaxDataRenderer = function(url, plot, options){
        var ret = null;
        $.ajax({
            async: false,
            url: url,
            dataType: "json",
            success: function(data){
                ret = data;
            }
        });
        return ret;
    };
    
});
	function getReportData(url){
		var ret = null;
        $.ajax({
			async:false,
            cache: true,
            url: url,
            dataType: "json",
            success: function(data){
				ret = data;
            }
        });
        return ret;
	}
	
	function generateChart(){
		var jsonurl = "http://esearchdev.no-ip.info/report/get_report_data";
		var jsondata = getReportData(jsonurl);
		
		
	    
	    
	    
	    // passing in the url string as the jqPlot data argument is a handy
	    // shortcut for our renderer.  You could also have used the
	    // "dataRendererOptions" option to pass in the url.
		plot1 = $.jqplot('dataChart', jsondata, plotOptions).replot();
		
		/*
	    var plot2 = $.jqplot('dataChart', jsonurl, {
	        dataRenderer: ajaxDataRenderer,
	        dataRendererOptions: {
	            unusedOptionalUrl: jsonurl
	        }
	    });
	    */
	}
	
</script>
  </head>
  <body>
    <input type="button" value="generate" onclick="generateChart()"/>
  <div class="example-content">
      <div id="dataChart" class="plot" style="width:100%;height:300px;"></div>
  </div>
</body>
</html>
